import React, { Component } from 'react';
import { View, StyleSheet, Text, Button, FlatList, TextInput, Slider, Dimensions, ScrollView } from 'react-native';
import { connect } from 'react-redux';

import ScrollableTabView, { ScrollableTabBar } from 'react-native-scrollable-tab-view';
import TabBar from "react-native-underline-tabbar";

import * as userAction from '../actions/user'
import { scaleFontSize, scaleSize } from "../util/size";
import MarketIndex from "./MarketIndex";

const { width: deviceWidth } = Dimensions.get('window');

export default class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: ''
        }
    }

    chkPrice(obj) { //方法1
        obj = obj.replace(/[^\d.]/g, "");
        //必须保证第一位为数字而不是. 
        obj = obj.replace(/^\./g, "");
        //保证只有出现一个.而没有多个. 
        obj = obj.replace(/\.{2,}/g, ".");
        //保证.只出现一次，而不能出现两次以上 
        obj = obj.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
        return obj;
    }


    render() {
        return (
            <View>
                <TextInput
                    style={{ marginTop: 200, height: 40, borderColor: 'gray', borderWidth: 1 }}
                    onChangeText={(text) => {
                        const newText = this.chkPrice(text);
                        console.log('newText', newText);
                        this.setState({ inputValue: newText })
                    }}
                    value={this.state.inputValue.toString()}
                    keyboardType='numeric'
                />
                <Text>{this.state.inputValue}</Text>
            </View>
        )
    }
}


// class Test extends Component<Iprops, any> {

//     constructor (props) {
//         super(props);
//         this.state = {
//             test: ''
//         }
//     }

//     shouldComponentUpdate (nextProps, nextState) {
//         console.log('nextProps', nextProps);
//         return true;
//     }

//     render() {
//         const size = 20;
//         return (
//             <ScrollView style={{marginTop: 50}}>
//             <View style={{height: 120, backgroundColor: 'black'}}>
//                 <View style={{backgroundColor: 'white', height: 100, shadowColor: 'rgba(242,242,242,1)', shadowOffset: {width: 0, height: -1}}}>
//                     <Text>Shadow</Text>
//                 </View>
//             </View>
//                 <Text>{this.props.count}   cccc</Text>
//                 <Button onPress={() => {
//                     this.props.addCount()
//                 }} title={'11111'}>
//                 </Button>


//                 <View style={{marginTop: 40, backgroundColor: 'gray'}}>
//                     <View style={{zIndex: 10}}>
//                     <Slider value={10} minimumValue={0} maximumValue={100} step={25}/>
//                     </View>
//                     <View style={{display: 'flex', flexDirection: 'row', alignItems: 'baseline', marginTop: -30, marginBottom: 10, paddingRight: 10, justifyContent: 'space-between', paddingLeft: 1}}>
//                         <View style={{width: size, borderRadius: size, height: size, backgroundColor: 'blue'}}></View>
//                         <View style={{width: size, borderRadius: size, height: size, backgroundColor: 'blue'}}></View>
//                         <View style={{width: size, borderRadius: size, height: size, backgroundColor: 'blue'}}></View>
//                         <View style={{width: size, borderRadius: size, height: size, backgroundColor: 'blue'}}></View>

//                         <View style={{width: size, borderRadius: size, height: size, backgroundColor: 'blue', zIndex: 21}}>
//                             <View style={{width: size, borderRadius: size, height: size, backgroundColor: 'red', zIndex: 20}}>
//                         </View>
//                         </View>
//                     </View>
//                 </View>
//                 <View>
//                     <TextInput style={{height: 40, width: 300}}  value={this.state.test}  placeholder={'input'}
//                     onChangeText={(v) => {
//                         let t = Number(v);
//                         if (t < 10) {
//                             this.setState({test: (t + 1).toFixed(4)})
//                         } else {
//                             this.setState({test: Math.random().toFixed(5)})
//                         }
//                     }}>
//                     </TextInput>
//                 </View>
//                 <View style={[styles.container, {paddingTop: 20}]}>
//                     {/*<ScrollableTabView*/}
//                         {/*tabBarActiveTextColor="#3A62F0"*/}
//                         {/*style={{width: 200, marginLeft:0}}*/}
//                         {/*tarBarStyle={{}}*/}
//                         {/*tabBarTextStyle={{fontSize: 50}}*/}
//                         {/*tabStyles={{*/}
//                             {/*tab: {*/}
//                                 {/*width: 20*/}

//                             {/*},*/}
//                             {/*badgeText:{*/}
//                                 {/*fontSize: 40*/}
//                             {/*}*/}
//                         {/*}}*/}
//                         {/*renderTabBar={() => <ScrollableTabBar underlineColor="#3A62F0" />}>*/}
//                     <ScrollableTabView
//                         style={{marginTop: 0, height: 440}}
//                         initialPage={0}
//                         tabBarUnderlineStyle={{backgroundColor: '#3A62F0', height: 1}}
//                         tabBarActiveTextColor={'#3A62F0'}
//                         tabBarInactiveTextColor={'#999999'}
//                         tabBarBackgroundColor={'#FFFFFF'}
//                         tabBarTextStyle={{
//                             height: scaleSize(40),
//                             lineHeight: scaleSize(40),
//                             width: scaleSize((deviceWidth)/5),
//                             fontSize: scaleFontSize(14),
//                             textAlign: 'center'
//                         }}
//                         renderTabBar={() => <ScrollableTabBar style={{height: 40}} tabsContainerStyle={{justifyContent: 'center',width: scaleSize(deviceWidth)}} tabStyle={{paddingLeft: 1, paddingRight: 0, height: 40}}/>}
//                     >
//                         <View tabLabel={'自选'}>
//                             <MarketIndex key={'test1'}/>
//                         </View>

//                         <View tabLabel='BTC'><MarketIndex key={'test2'}/></View>
//                         <View tabLabel='ETH'><MarketIndex key={'test3'}/></View>
//                         <View tabLabel='EOS'><MarketIndex key={'test4'}/></View>
//                         <View tabLabel='CXP'><MarketIndex key={'test5'}/></View>
//                         {/*<Text tabLabel='CXP'>project</Text>*/}
//                         {/*<Page tabLabel={{label: "自选"}} label="Page #1"/>*/}
//                         {/*<Page tabLabel={{label: "BTC"}} label="Page #2 aka Long!"/>*/}
//                         {/*<Page tabLabel={{label: "ETH"}} label="Page #3"/>*/}
//                         {/*<Page tabLabel={{label: "EOS"}} label="Page #4 aka Page"/>*/}
//                         {/*<Page tabLabel={{label: "CXP"}} label="Page #5"/>*/}
//                     </ScrollableTabView>
//                     {/*<Text style={{width: 60,  height: scaleSize(40), lineHeight: scaleSize(40)}}>搜索</Text>*/}
//                 </View>
//             </ScrollView>

//         )
//     }
// }


const styles = StyleSheet.create({
    container: {
        height: 250,
        display: 'flex',
        flexDirection: 'row'
    }
});

// export default connect(
//     (state) => ( {
//         count: state.user.count
//     }),
//     (dispatch) => ({
//         login: () => dispatch(userAction.login()),
//         addCount: () => dispatch(userAction.addCount()),
//         logout: () => dispatch(userAction.Logout()),
//         Login: () => dispatch(userAction.Login({a: 1}))
//     })
// )(Test)
